<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var div=document.getElementsByTagName('div')[0];
            //获取属性
            console.log(div.className,'获取类名');
            console.log(div.id,'获取id');
            console.log(div.title,'获取title');
            console.log(div['title'],'获取title');
            //获取自定义属性
            console.log(div.flag,'获取自定义属性');//undefined
            console.log(div.getAttribute('data-flag'));
            console.log(div.getAttribute(['data-flag']));
            //修改自定义属性
            div.setAttribute('data-flag','我是自定义属性');
            div.setAttribute('id','id-test');
            console.log(div);
            // .style .onclick 返回的函数或者对象
            console.log(div.style,'返回的函数或者对象');
            console.log(div.onclick,'返回的函数或者对象');
            // 使用getAttribute返回的是字符串
            console.log(div.getAttribute('style','返回的是字符串'));
            console.log(div.getAttribute('onclick','返回的是字符串'));
            // 移除属性
            div.removeAttribute('title');
            console.log(div);
        }
    </script>
</head>
<body>
    <div onclick="test()" style="height: 100px;background-color: red;" class="one" id="two" title="我是一个div" data-flag="testflag">我是一个div</div>
    <script>
         //声明一下test方法
         function test(){
                alert('我被点击了')
            }
    </script>
</body>
</html>